<template>
  <div class="meas-container">
    <div>
      <el-button :icon="Search" plain type="primary" @click="openQuery">
        查询
      </el-button>
      <el-button :icon="Plus" plain type="primary" @click="toAdd">
        添加
      </el-button>
      <el-button :icon="Delete" plain type="warning" @click="toDelete">
        删除
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="toUpdate">
        修改
      </el-button>
    </div>
    <div style="height: 20px"></div>
    <el-row>
      <el-col :span="18">
        <el-table
          :data="state.whData"
          highlight-current-row="true"
          size="small"
          style="width: 100%"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column label="仓库编码" prop="whCode" width="180" />
          <el-table-column label="仓库名称" prop="whName" width="180" />
          <el-table-column label="是否现场仓" min-width="50" prop="sceneFlag">
            <template #default="scope">
              {{ scope.row.sceneFlag === true ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="是否废品库" prop="gubFlag">
            <template #default="scope">
              {{ scope.row.gubFlag === true ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="是否货位管理" prop="csFlag">
            <template #default="scope">
              {{ scope.row.csFlag === true ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="是否发货仓" prop="isDelivery">
            <template #default="scope">
              {{ scope.row.isDelivery === true ? '是' : '否' }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="paginationParams.pageNo"
          :layout="layout"
          :page-size="paginationParams.pageSize"
          :total="paginationParams.total"
          @current-change="handlePaginationCurrentChange"
          @size-change="handlePaginationSizeChange"
        />
      </el-col>
    </el-row>
    <QueryDialogVue ref="queryDialogRef" @query-callback="queryCallback" />
    <WhModuleVue ref="whModuleRef" @success-callback="getWhData" />
  </div>
</template>

<script setup>
  import { Plus, Delete, Edit, Search } from '@element-plus/icons-vue'
  import QueryDialogVue from './modules/queryDialog.vue'
  import WhModuleVue from './modules/whModule.vue'
  import { getWarehousePagepApi, removeWarehouseApi } from '@/api/base/wh'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseMessage = inject('$baseMessage')

  const queryDialogRef = ref()
  const whModuleRef = ref()
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const openQuery = () => {
    queryDialogRef.value.openDialog()
  }
  const queryCallback = (query) => {
    state.queryInfo.whCode = query.whCode
    state.queryInfo.whName = query.whName
    getWhData()
  }
  const toAdd = () => {
    whModuleRef.value.openDialog()
  }

  const toUpdate = () => {
    whModuleRef.value.openDialog(state.currentRow)
  }
  const toDelete = async () => {
    if (state.currentRow.pkWh) {
      ElMessageBox.confirm('确定要删除该仓库吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await removeWarehouseApi({
            pkWh: state.currentRow.pkWh,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            getWhData()
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的仓库', 'warning')
    }
  }

  const state = reactive({
    whData: [],
    meadocs: [],
    currentRow: {},
    queryInfo: {},
  })
  const paginationParams = reactive({
    pageNo: 1,
    pageSize: 20,
    total: 0,
  })
  const getWhData = async () => {
    var params = {
      pageSize: paginationParams.pageSize,
      pageNum: paginationParams.pageNo,
      pkCorp: pkCorp,
      whCode: state.queryInfo.whCode,
      whName: state.queryInfo.whName,
    }
    const { code, data } = await getWarehousePagepApi(params)
    if (code === 2000) {
      state.whData = data.list
      paginationParams.total = data.total
    }
  }

  const handleCurrentChange = (row) => (state.currentRow = row)

  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNo = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNo = 1
  }

  watch(paginationParams, () => {
    getWhData()
  })

  onMounted(async () => await getWhData())
</script>

<style scoped></style>
